﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet"> 

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
<!--    <link rel="stylesheet" href="../static/css/style.css">-->
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link href="/css/shortcode/single-product.css" rel="stylesheet">
    <link href="/css/shortcode/cart.css" rel="stylesheet">
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<!--    <script>-->
<!--        $(document).ready(function() {-->
<!--            var msg = '[[${msg}]]'; // 使用Thymeleaf语法获取后端传递的消息-->
<!--            if (msg !== '') {-->
<!--                alert(msg); // 如果有消息，则弹出提示框-->
<!--            }-->
<!--        });-->
<!--    </script>-->
<body>


    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>Support free: (343) 3434 333
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->
            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End -->     

        <!-- Breadcrumb End -->
        <!-- Cart Main Area Start -->
        <div class="kiosk-products-cart ptb-70 pb-sm-50">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Form Start -->
<!--                        <form action="#">-->
                            <!-- Table Content Start -->
                            <div class="table-content table-responsive">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="kiosk-product-thumb">商品图片</th>
                                            <th class="product-name">商品名</th>
                                            <th class="product-price">单价</th>
                                            <th class="product-price">颜色</th>
                                            <th class="product-price">尺码</th>
                                            <th class="product-quantity">数量</th>
                                            <th class="product-total">总价</th>
                                            <th class="kiosk-product-remove">结算</th>
                                            <th class="product-price">删除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <form id="opriceForm" action="/toByShops" method="post">
                                        <input type="hidden" name="oprice" id="oprice" />

                                        <div th:each="car:${carList}">

                                        <tr>
                                            <td class="kiosk-product-thumb">
                                                <a href="#"><img th:src="|/clothes/${car.c_picture2}|" alt="cart-image" /></a>
                                            </td>
                                            <td class="product-name" th:text="${car.c_name}"><a href="#">Standard Shoes</a></td>
                                            <td class="product-price" th:text="${car.c_price}"><span class="amount">$232.00</span></td>
                                            <td class="product-price" ><span class="amount" th:text="${car.color_name}">蓝色</span></td>
                                            <td class="product-price" ><span class="amount" th:text="${car.size_name}">31</span></td>
                                            <td class="product-quantity" th:text="${car.quantity}">
                                                <input value="1" type="number">
                                            </td>
                                            <td class="product-total text-center"><span class="amount" th:text="${car.c_price}*${car.quantity}">$232.00</span></td>
                                            <td class="product-add-to-cart"><input type="checkbox" onclick="changeTotal()" name="car_id" th:value="${car.car_id}"></td>


                                            <td class="product-price" text="删除" >

                                                <button type="button" class="btn btn-danger" th:value="${car.c_id}" id="delectCid" th:onclick="|deleteCar(${car.car_id})|">删除</button>
                                            </td>
                                        </tr>

                                    </div>

                                    </form>
                                    </tbody>
                                </table>
                            </div>
                            <!-- Table Content Start -->
<!--                        </form>-->
                        <!-- Form End -->
                    </div>
                </div>
                 <!-- Row End -->
            </div>
        </div>
        <!-- Cart Main Area End -->
        <!-- newsletter start -->
        <div style="    display: inline-block;
    width: 100px;
    position: relative;
    left: 1245px;
    margin-bottom: 38px;"  class="kiosk-product-buy-button"> <!-- 购买按钮 -->
            <span id="totalSpan">0</span>
            <button type="button" class="btn btn-success buy-button" onclick="setSubmit()">购买</button>
        </div>
        <!-- newsletter End -->
        <!-- Footer Start -->
        <div th:include="lop :: topFragment"></div>
        <!-- Footer End -->
    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>
     <script>
         function deleteCar(car_id) {
             //var c_id = $("#delectCid").val();
             // 确认删除操作
             if (confirm('您确定要删除这个商品吗？')) {
                 $.ajax({
                     url:"/deleteCart" ,
                     type: 'post',
                     data: {car_id: car_id},
                     success: function(msg) {
                         window.alert("删除成功");
                         location.reload(true);
                     },
                 });
             }
         }

         function changeTotal(){
             var checkboxes = $("input[name='car_id']:checked");
             var tmoney = 0;
             for(var i=0;i<checkboxes.length;i++){
                 var currentCheck = checkboxes[i];
                 var money = $($(currentCheck).parent().parent().children("td")[6]).text();
                 tmoney+=parseFloat(money);
             }
             $("#totalSpan").html(tmoney);
             $("#oprice").val(tmoney);
         }

         function setSubmit(){
             $("#opriceForm").submit();
         }

     </script>

</body>
</html>
